<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <!-- 
        模板中的属性值默认都是字符串格式的
        如果希望属性值的区域是一个插值语法区域，我们就可以使用v-bind指令
        v-bind，强制绑定（动态绑定）：把一个模板中的属性的值区域变成插值语法区域，在插值语法区域中可以执行表达式，也可以去实例上拿值
        v-bind可以直接简写为 ":"
     -->
    <div id="app">
      <!-- <img v-bind:src="imgUrl" alt="" />
      <img :src="imgUrl" :alt="imgUrlMsg" /> -->
      <div v-bind:doublePrice="price*2">
        用户名：<input type="text" v-bind:value="user.username" /> 密码：<input
          type="text"
          v-bind:value="user.userpwd"
        />
      </div>
      <img :src="baseUrl+'01.png'" alt="" />
      <img :src="baseUrl+'02.png'" alt="" />
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        imgUrl: './imgs/01.png',
        imgUrlMsg: 'how are you?',
        user: {
          username: 'admin',
          userpwd: '123456',
        },
        price: 100,
        baseUrl: './imgs/',
      };
    },
  });
</script>
